<template>
	<view :class="row > 0 ? 'button-list-row' : 'button-list'" :style="'margin:'+margin+'%;'">
		<view v-for="(item, index) in datas" :key="index" class="button-item" @click="$goto(item.path)">
			<image :src="item.pic"></image>
			<text class="name">{{item.name}}</text>
			<text v-if="row > 0" class="desc">{{item.desc}}</text>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		margin: {
			type : Number,
			default : 0
		},
		row : {
			type : Number,
			default : 0
		},
		datas: Array
	},
	data() {
		return {
		}
	},
	mounted() {
		
	},
	methods: {
		
	}
}
</script>

<style lang='scss'>
	.button-list {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap:wrap;
		background: #fff;
		padding-bottom: 10upx;
		.button-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			width: 20%;
			image{
				margin: 10upx;
				width: 80upx;
				height: 80upx;
			}
		}
	}
	.button-list-row {
		background: #fff;
		.button-item {
			display: flex;
			align-items: center;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			height: 100upx;
			width: 100%;
			border-bottom:1px solid #eee;
			image{
				margin:0 15upx;
				width: 50upx;
				height: 50upx;
			}
			.name {
				font-size: 28upx;
			}
			.desc{
				padding-right: 10upx;
				flex : 1;
				text-align: right;
				color: #999999;
				font-size: 24upx;
			}
		}
		.button-item:last-child{
			border-bottom:none;
		}
	}
</style>